<template>
  <div class="app-container">
    <div class="custom_card">
      <el-card shadow="navar" id="menuFlag">
        <el-row :gutter="15">
          <el-form :model="formData" size="medium" label-width="120px">
            <MmvTitle title="活动数据"></MmvTitle>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="活动类型:">
                  <dict-tag
                    :options="dict.type.activityType"
                    :value="formData.activityType"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动名称:">{{
                  formData.activityName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动时间:">
                  {{ formData.startTime }}-{{ formData.endTime }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动门店:">{{ storeName }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务类型:">
                  <dict-tag
                    :options="dict.type.sys_business"
                    :value="formData.bizType"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="活动状态:">
                  <dict-tag
                    :options="dict.type.activity_status"
                    :value="formData.activityStatus"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <MmvTitle title="浏览记录"></MmvTitle>
          <!--        <el-row :gutter="15">-->
          <!--          <el-col :span="8">-->
          <!--            <div>浏览人数:{{1}}</div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8">-->
          <!--            <div>领取人数:{{ 2 }}</div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8">-->
          <!--            <div>目标群体参与率:{{3}}</div>-->
          <!--          </el-col>-->
          <!--        </el-row>-->
          <el-form
            :model="browseQueryParams"
            ref="browseQueryForm"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="" prop="keyWord">
              <el-input
                v-model="browseQueryParams.keyWord"
                clearable
                placeholder="输入用户名称/联系方式搜索"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getBrowsingRecords"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetBrowseQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-table :data="browsingRecordsList" border>
            <el-table-column
              label="微信头像"
              align="center"
              min-width="140"
              show-overflow-tooltip
              prop="vxUrl"
            >
              <template slot-scope="{ row }">
                <el-avatar :src="row.vxUrl"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
              label="微信昵称"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="vxName"
            />
            <el-table-column
              label="联系方式"
              align="center"
              min-width="140"
              show-overflow-tooltip
              prop="contactPhone"
            />
            <el-table-column
              label="客户来源"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="memberSource"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.memberSource"
                  :value="scope.row.memberSource"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="授权时间"
              align="center"
              min-width="160"
              show-overflow-tooltip
              prop="createTime"
            />
            <el-table-column
              label="客户标签"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="labelClassify"
            >
              <template slot-scope="scope">
                <el-tag
                  type="success"
                  v-for="(label, index) in scope.row.labelClassify"
                  :key="index"
                >
                  <div>
                    <dict-tag
                      :options="dict.type.label_classify"
                      :value="label"
                      style="margin-top: 5px"
                    />
                  </div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="是否参与活动"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="couponNum"
            >
              <template slot-scope="scope">
                <div v-if="formData.templateType == 1">
                  {{ scope.row.couponNum > 0 ? '是' : '否' }}
                </div>
                <div v-else>{{ scope.row.orderNum > 0 ? '是' : '否' }}</div>
              </template>
            </el-table-column>
          </el-table>

          <div v-if="formData.templateType == 2">
            <MmvTitle title="活动订单"></MmvTitle>
            <el-row :gutter="15">
              <el-col :span="4">
                <!--          <el-form-item label="活动订单数:">{{120}}单</el-form-item>-->
              </el-col>
              <el-col :span="4">
                <!--          <el-form-item label="总计:">{{ 1200 }}元</el-form-item>-->
              </el-col>
            </el-row>
            <el-form
              :model="orderQueryParams"
              ref="orderQueryForm"
              :inline="true"
              label-width="68px"
            >
              <el-form-item label="" prop="keyWord">
                <el-input
                  v-model="orderQueryParams.keyWord"
                  clearable
                  placeholder="输入客户名称/联系方式搜索"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="getOrderList"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetOrderQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-table :data="orderManageList">
              <el-table-column
                label="下单时间"
                align="center"
                prop="createTime"
              />
              <el-table-column label="订单号" align="center" prop="orderNo" />
              <el-table-column
                label="客户名称"
                align="center"
                prop="memberName"
              />
              <el-table-column
                label="联系电话"
                align="center"
                prop="contactPhone"
              />
              <!--        <el-table-column label="支付时间" align="center" prop="createTime"/>-->
              <el-table-column
                label="支付商品"
                align="center"
                prop="modelName"
              />
            </el-table>
          </div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getActivityManage,
  applicableUnitList,
  getBrowsingRecords,
  getActivityOrders,
} from '@/api/marketingManagement/activityManage'

import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import Preview from './preview.vue'

export default {
  components: {
    MmvTitle,
    Preview,
  },
  dicts: [
    'sys_business',
    'activityType',
    'activity_status',
    'label_classify',
    'memberSource',
  ],
  data() {
    return {
      browseQueryParams: {
        keyWord: null,
      },
      rowsingRecordsTotal: 0,
      browsingRecordsList: [],

      orderQueryParams: {
        keyWord: null,
      },
      orderTotal: 0,
      orderManageList: [],
      activityId: null,
      formData: {
        templateType: 1,
        activityType: 1,
        templateId: undefined,
        activityName: undefined,
        activityContent: undefined,
        startTime: null,
        endTime: null,
        bizType: undefined,
        isHomeRecommend: 1,
        smallProgramCode: 1,
        issueType: 3,
        isAccurateDelivery: 2,
        pushGroup: undefined,
        pushWay: 1,
        marketingTarget: 0,
        pushContent: undefined,
        couponManages: [],
        carModelList: [],
        applicableUnit: [],
        activityTemplate: {},
      },
    }
  },
  computed: {
    storeName() {
      let nameArr = []
      this.formData.applicableUnit.map((item) => {
        this.applicableUnitOptions.map((e) => {
          if (e.applicableUnitNo === item) {
            nameArr.push(e.applicableUnit)
          }
        })
      })
      return nameArr.join('、')
    },
  },
  watch: {},
  created() {
    //获取门店
    this.getApplicableUnitList()
    this.activityId = this.$route.query.id
    if (this.activityId) {
      getActivityManage(this.activityId).then((response) => {
        this.formData = response.data
        if (this.formData.templateType == 2) {
          this.getOrderList()
        }
      })
      this.getBrowsingRecords()
    }
  },
  mounted() {},
  methods: {
    //获取浏览记录
    getBrowsingRecords() {
      let param = {
        ...this.browseQueryParams,
        activityId: this.activityId,
      }
      getBrowsingRecords(param).then((res) => {
        this.browsingRecordsList = res.rows
      })
    },
    //重置浏览记录查询
    resetBrowseQuery() {
      this.resetForm('browseQueryForm')
      this.getBrowsingRecords()
    },

    //获取浏览记录
    getOrderList() {
      let param = {
        ...this.orderQueryParams,
        activityId: this.activityId,
      }
      getActivityOrders(param).then((res) => {
        this.orderManageList = res.rows
      })
    },
    //重置订单记录查询
    resetOrderQuery() {
      this.resetForm('orderQueryForm')
      this.getOrderList()
    },

    // 获取活动门店
    getApplicableUnitList() {
      applicableUnitList().then((res) => {
        this.applicableUnitOptions = res.data
      })
    },

    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>
